<template>
  <el-row class="person-main">
    <el-col :span="7">
      <!-- 个人资料 -->
      <div class="personal-data el-card box-card is-always-shadow">
        <div style="margin-left:15px;margin-top:15px">
          <span>个人中心</span>
        </div>
        <hr color="#E6EBF5">
        <table class="personal-data-table" width="100%" cellspacing="0">
          <tbody>
            <tr>
              <td>
                <i class="el-icon-user-solid"></i>
                用户名：
              </td>
              <td>{{ data.name }}</td>
            </tr>
            <tr>
              <td>
                <i class="el-icon-male"></i>
                性别：
              </td>
              <td>
                <span v-if="data.gender == 0">男</span>
                <span v-else-if="data.gender == 1">女</span>
                <span v-else>未知</span>
              </td>
            </tr>
            <tr>
              <td>
                <i class="el-icon-mobile-phone"></i>
                电话：
              </td>
              <td>{{ data.tel }}</td>
            </tr>
            <tr>
              <td>
                <i class="el-icon-postcard"></i>
                状态：
              </td>
              <td>{{ data.isDelete == 0 ? "正常" : "停用" }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </el-col>
    <el-col :span="17">
      <!-- 基础资料 -->
      <div class="initial-value el-card box-card is-always-shadow">
        <div style="margin-left:15px;margin-top:15px">
          <span>基础资料</span>
        </div>
        <hr color="#E6EBF5">

        <el-tabs v-model="activeName" style="margin:15px">
          <el-tab-pane label="基础资料" name="BasicData">

            <el-form ref="data" :model="data" :rules="rules" label-width="100px">
              <el-form-item label="用户名" prop="name">
                <el-input v-model="data.name" maxlength="20" size="small"></el-input>
              </el-form-item>

              <el-form-item label="性别">
                <el-radio-group v-model="data.gender">
                  <el-radio label="0">男</el-radio>
                  <el-radio label="1">女</el-radio>
                </el-radio-group>
              </el-form-item>

              <el-form-item label="电话" prop="tel">
                <el-input v-model="data.tel" maxlength="11" size="small"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" size="mini" @click="submitForm('data')">保存</el-button>
              </el-form-item>
            </el-form>


          </el-tab-pane>
          <el-tab-pane label="修改密码" name="updatePwd">

            <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px">
              <el-form-item label="旧密码" prop="pass">
                <el-input type="password" v-model="ruleForm.pass" autocomplete="off" maxlength="22"
                  size="small"></el-input>
              </el-form-item>
              <el-form-item label="新密码" prop="newPass">
                <el-input type="password" v-model="ruleForm.newPass" autocomplete="off" maxlength="22"
                  size="small"></el-input>
              </el-form-item>
              <el-form-item label="确认新密码" prop="checkPass">
                <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off" maxlength="22"
                  size="small"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" size="mini" @click="submitFormPwd('ruleForm')">保存</el-button>
              </el-form-item>
            </el-form>

          </el-tab-pane>
        </el-tabs>
      </div>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: "personalData",
  data() {
    var checkTel = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入电话'));
      } else {
        const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;//11位手机号
        if (!reg.test(value)) {
          callback(new Error("电话格式错误"))
        } else {
          callback()
        }
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入新密码'));
      } else {
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请确认新密码'));
      } else if (value !== this.ruleForm.newPass) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      data: {},
      activeName: 'BasicData',
      rules: {
        name: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ],
        tel: [
          { required: true, message: '请输入电话', trigger: 'blur' },
          { validator: checkTel }
        ],
        pass: [
          { required: true, message: '请输入旧密码', trigger: 'blur' },
          { min: 6, max: 22, message: '长度在 6 到 22 个字符', trigger: 'blur' }
        ],
        newPass: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          { validator: validatePass, trigger: 'blur' },
          { min: 6, max: 22, message: '长度在 6 到 22 个字符', trigger: 'blur' }
        ],
        checkPass: [
          { required: true, message: '请确认新密码', trigger: 'blur' },
          { validator: validatePass2, trigger: 'blur' }
        ],
      },
      ruleForm: {
        pass: '',
        newPass: '',
        checkPass: ''
      },
    }
  }, created() {
    //初始化id
    this.data = this.$store.getters.getUser

  },
  methods: {
    getPersonById() {
      this.$axios.get("/teacher/selectTeacherById?id=" + this.data.id).then(res => {
        this.data = res.data.data
        this.$store.commit("SET_USERINFO", res.data.data)
      })
    },
    //修改基础资料
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let data = {
            id: this.data.id,
            name: this.data.name,
            gender: this.data.gender,
            tel: this.data.tel
          }
          this.$axios.put("/teacher/updateTeacher", data).then(res => {
            console.log(res, "res")
            if (res.data.code == 200) {
              this.getPersonById()
            }
          })
        } else {
          return false;
        }
      });
    },
    //修改密码
    submitFormPwd(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios.put("/teacher/updatePassword", {
            id: this.data.id,
            password: this.ruleForm.newPass,
            former: this.ruleForm.pass
          }, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }).then(res => {
            if (res.data.code == 200) {
              this.$store.commit("REMOVE_INFO")
              this.$router.replace("/login")
            }
          })
        } else {
          return false;
        }
      });
    }

  }
}
</script>

<style >
.el-form-item__label {
  font-weight: bold;
}

.person-main .personal-data-table {
  padding: 15px;
}

.person-main .personal-data-table tbody td {
  font-size: 15px;
  color: rgb(0, 0, 0);
  padding: 5px;
  padding-left: 0px;
  border-bottom: 1px solid #E6EBF5;
}
.person-main .personal-data-table tbody td:nth-child(2) {
  text-align: right;
}

.person-main .personal-data {
  border-radius: 5px;
  margin-right: 40px;
  border: 1px solid #E6EBF5;
}

</style>